<script setup>
import { Close } from '@element-plus/icons-vue'
import { useCartStore } from '@/stores/cartList.js'
import { ref } from 'vue'
const cartStore = useCartStore()
defineOptions({
  name: 'dropGoods'
})
defineProps({
  good: {
    type: Object
  }
})
const visible = ref(false)
const del = (ids) => {
  cartStore.removeCartList([ids])
  ElMessage.success('删除成功')
}
</script>

<template>
  <div class="item border-bottom p-3" v-if="good" @click="console.log(good)">
    <div class="row">
      <img :src="good.picture" class="col-3" alt="" />
      <div class="col-5">
        <h6>{{ good.name }}</h6>
        <p class="text-secondary">{{ good.attrsText }}</p>
      </div>
      <div class="col-3">
        <h5 class="text-danger">{{ '￥' + good.price }}</h5>
        <p class="text-secondary">{{ 'X' + good.count }}</p>
      </div>
      <div class="col-1">
        <el-popover :visible="visible" placement="right" :width="160">
          <p>您确定要删除此商品吗</p>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false"
              >取消</el-button
            >
            <el-button size="small" type="primary" @click="del(good.skuId)"
              >确认</el-button
            >
          </div>
          <template #reference>
            <el-link
              :icon="Close"
              :underline="false"
              @click="visible = true"
            ></el-link>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item {
  width: 500px;
  a {
    transition: 0.5s;
    opacity: 0;
  }
  &:hover a {
    opacity: 1;
  }
}
h6,
p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
